<template>
  <el-container class="table-container">
    <el-table
      border
      ref="table"
      v-bind="$attrs"
      :data="singTbaleList"
      :columns="singTbaleColumns"
      v-loading="singTbaleLoading"
      @selection-change="selectionChange"
      :row-class-name="tableRowClassName"
    >
      <!-- 判断是否有复选框 -->
      <el-table-column
        v-if="selection"
        type="selection"
        width="39"
      ></el-table-column>
      <template v-for="(item, index) in singTbaleColumns">
        <el-table-column
          :key="index"
          :resizable="false"
          v-bind="item.attrs"
          :render-header="labelHead"
          :show-overflow-tooltip="true"
          :sortable="item.sortable === undefined"
        >
          <template slot-scope="scope">
            <!-- 判断是否有slot -->
            <slot
              v-if="item.slot"
              :row="scope.row"
              :index="scope.$index"
              :name="item.slot"
            ></slot>
            <template v-else>{{
              scope.row[item.attrs.prop] | across
            }}</template>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </el-container>
</template>

<script>
export default {
  props: {
    // 页面的$data
    data: {
      type: Object,
      required: true,
    },
    // 列表
    list: {
      type: Array,
      required: false,
    },
    // 列表字段
    columns: {
      type: Array,
      required: false,
    },
    // loading
    loading: {
      type: Boolean,
      required: false,
    },
    // 是否显示勾选按钮
    selection: {
      type: Boolean,
      required: false,
    },
    // 是否处理row的选中
    isSelectable: {
      type: Boolean,
      required: false,
    },
    // 高度
    height: {
      default: "100%",
      required: false,
    },
    // 高亮
    highlight: {
      default: String,
      required: false,
    },
  },
  created() {
    // 初始化
    this.init();
  },
  data() {
    return {
      singTbaleList: [],
      singTbaleColumns: {},
      singTbaleLoading: false,
    };
  },
  watch: {
    // 监听data变化
    data: {
      handler() {
        // 初始化
        this.init();
      },
      deep: true,
    },
    // 监听列表数据变化
    list() {
      this.$nextTick(() => {
        this.$refs.table.bodyWrapper.scrollTop = 0;
      });
    },
  },
  methods: {
    // 初始化
    init() {
      // 如果data存在则从data中获取数据
      if (this.data !== undefined) {
        this.singTbaleList = this.data.list;
        this.singTbaleColumns = this.data.columns;
        this.singTbaleLoading = this.data.loading;
      }
    },
    // 当选择项发生变化时会触发该事件
    selectionChange(selection) {
      if (this.data !== undefined) {
        this.data.selectionList = selection;
      } else {
        this.$emit("update:selectionList", selection);
      }
    },
    // 标色
    tableRowClassName({ row, rowIndex }) {
      let Cls = "";
      if (this.highlight && row.id === this.data.activeId) {
        Cls = "success-row";
      }
      return Cls;
    },
  },
};
</script>


<style lang="scss">
.table-container {
  background-color: $white;
  padding: 10px;

  .el-table__header-wrapper {
    background-color: $cc !important;

    .gutter {
      display: block !important;
    }
  }

  .el-table__body-wrapper {
    @include scroll-beautify(3px, $ccc, $f9fafb, scroll);
    height: calc(100vh - 248px);
    overflow-y: auto;

    .cell {
      line-height: 28px;
      min-height: 28px;
    }

    .table-link {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      cursor: pointer;
      display: inline;
      color: $mc;
    }

    .table-pic {
      line-height: 48px;
      height: 48px;
      width: 48px;

      .el-avatar {
        background: $f9fafb;
      }

      .img {
        line-height: 48px;
        max-width: 100%;
      }
    }
  }

  th {
    background-color: $f9fafb !important;

    > .cell {
      padding-right: 20px !important;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 35px;

      .caret-wrapper {
        position: absolute !important;
        right: 0;
        top: 50%;
        margin-top: -17px;
      }
    }
  }
}
</style>
